<template>
  <div class="w-[35px] h-[35px]" :class="[$style.box, $style[modelValue || status[0]]]" ref="box">
    <div v-for="x in status.concat(surface)" :key="x" :class="$style[x]">
      <slot :name="x" />
    </div>
  </div>
</template>

<script lang="ts" name="XBox" setup>
import { BoxStatus } from '@/@types/box'

// eslint-disable-next-line vue/require-prop-types
defineProps(['modelValue'])

// 数据定义
const surface = [BoxStatus.TOP, BoxStatus.BOTTOM]
const status = [BoxStatus.FRONT, BoxStatus.BEHIND, BoxStatus.LEFT, BoxStatus.RIGHT]

const selfW = ref('')
const box = ref()

onMounted(() => {
  const el = box.value
  const { width } = el.getBoundingClientRect()
  selfW.value = `${width / 2}px`
})

</script>

<style module lang="scss">
.box{
  transform-style: preserve-3d;
  transition: transform 0.6s ease;
  --x-scale: 1;
  --rotate-x: 5deg;
  --rotate-y: -10deg;
  transform: rotateX(var(--rotate-x)) rotateY(var(--rotate-y)) scale(var(--x-scale));
  &.front {
    --rotate-y: -10deg;
  }
  &.right {
    --rotate-y: -100deg;
  }
  &.behind {
    --rotate-y: -190deg;
  }
  &.left {
    --rotate-y: -280deg;
  }
  .front, .behind, .left, .right, .top, .bottom{
    @apply absolute top-0 left-0 w-full h-full backface-hidden text-white;
    background: linear-gradient(134.31deg, rgba(86, 194, 255, 0.85) 0%, rgba(75, 110, 232, 0.85) 50.83%, rgba(4, 82, 184, 0.8) 100%);
    border: 1px solid;
    border-image: linear-gradient(135deg, rgba(99, 187, 252, 1) 0%, transparent 40%, transparent 60%, rgba(142, 201, 255, 1) 100%) 2;
    text-align: center;
  }
  $w: 17.5px;
  .front {
    transform: translateZ($w);
  }
  .behind {
    transform: translateZ(-$w) rotateY(180deg);
  }
  .left {
    transform: rotateY(-90deg) translateZ($w);
  }
  .right {
    transform: rotateY(90deg) translateZ($w);
  }
  .top {
    transform: rotateX(90deg) translateZ($w);
  }
  .bottom {
    transform: rotateX(-90deg) translateZ($w);
  }
}
</style>